<template>
	<view class="box">
		<ttBar title="绑定支付宝" leftIcon="icon-back"></ttBar>
		<view class="tishi">
			<text class="iconfont icon-iconfontxiaogantanhao"></text>
			<text>为确保支付宝信息填写正确，请安下方教程填写</text>
		</view>
		<view class="imgBox">
			<image src="https://test.hawklu.com/capp/120.png"></image>
			<text class="iconfont icon-jiantou"></text>
			<image src="https://test.hawklu.com/capp/alip.png"></image>
		</view>
		<view class="inputBox">
			<view class="row">
				<text class="label">真实姓名</text>
				<input type="text" placeholder="输入支付宝实名认证的姓名" v-model="rname" />
			</view>
			<view class="row">
				<text class="label">支付宝账号</text>
				<input type="text" placeholder="输入支付宝账号(手机号/邮箱)" v-model="rcount" />
			</view>
			<view class="row">
				<text class="label">验证码</text>
				<input type="number" placeholder="请输入验证码" v-model="msgCode" />
				<button :class="[isSendMsg?'dis':'']" @tap="getMsgCode">{{sendText}}</button>
			</view>
		</view>
		
		<button class="save" @tap="save">保存</button>
		
		<text class="ts1">如何在支付宝App中查看支付宝账号？</text>
		<text class="ts2">如有疑问，请联系客服微信：18851638143</text>
		<button class="copy" @tap="copy">复制微信号</button>
		
		<image class="js" mode="widthFix" src="https://test.hawklu.com/capp/jc.png">
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		data() {
			return {
				rname:'',
				rcount:'',
				sendText: '获取验证码',
				isSendMsg: false,
				msgCode:''
			};
		},
		methods:{
			copy(){
				uni.setClipboardData({
				    data:'18851638143',
				    success: function () {
				       uni.showToast({
				       	title: '复制成功',
				       	icon: 'none'
				       });
				    }
				});
			},
			// 获取短信验证码
			getMsgCode() {
				if (!this.isSendMsg) {
					this.$store.dispatch("apiSendMsgCode",{
						phone:this.userInfo.username,
						type:'6'
					}).then(res=>{
						this.isGetMsg = true; //修改状态
						let t = 60;
						this.sendText = t + "秒"
						this.isSendMsg = true;
						const itval = setInterval(() => {
							t--;
							if (t < 1) {
								t = 60;
								this.sendText = "获取验证码"
								this.isSendMsg = false;
								clearInterval(itval);
							} else {
								this.isSendMsg = true;
								this.sendText = t + "秒"
							}
						}, 1000)
					})
					
				} else {
					uni.showToast({
						title: '发送的间隔太短啦，请稍后再试',
						icon: 'none'
					});
				}
			},
			save(){
				if(!this.rname.tailCut()){
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					});
				}else if(!this.rcount.tailCut()){
					uni.showToast({
						title: '请输入支付宝账号',
						icon: 'none'
					});
				}else if(!this.isSendMsg){
					uni.showToast({
						title: '请先获取短信验证码',
						icon: 'none'
					});
				}else if (!this.msgCode) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					});
				} else{
					this.$store.dispatch("apiBindAlipay",{
						userId:this.userInfo.userId,
						aliName:this.rname,
						phone:this.userInfo.username,
						aliAccount:this.rcount,
						code:this.msgCode
					}).then(res=>{
						if(res.data.code==1){
							uni.showToast({
								title: '绑定成功',
								icon: 'none'
							});
							this.userInfo.aliName=this.rname;
							this.userInfo.aliAccount=this.rcount;
							uni.$emit("getAliInfo",{
								aliName:this.rname,
								aliAccount:this.rcount
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1000)
							
						}
					})
				}
			},
			
		},
		onLoad() {
			this.rname=this.userInfo.aliName;
			this.rcount=this.userInfo.aliAccount;
		}
	}
</script>

<style lang="less" >
	button:after{
		border: none;
		outline: none;
	}
	.box{
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;
	}
	page{
		background-color: #f6f6f6;
	}
	.tishi{
		height: 70upx;
		background-color:#f7e0e0;
		font-size: 28upx;
		display: flex;
		align-items: center;
		color: #ec2d2d;
		padding-left: 40upx;
		.iconfont{
			margin-right: 10upx;
		}
	}
	.imgBox{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30upx;
		image{
			width: 106upx;
			height: 106upx;
		}
		.iconfont{
			transform: rotate(-90deg);
			font-size: 60upx;
			color:#ff802a;
			margin: 0 58upx;
		}
	}
	.inputBox{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 0 50upx;
		.row{
			display: flex;
			align-items: center;
			
			height: 80upx;
			border-bottom: 1px solid #e6e6e6;
			text{
				line-height: 80upx;
				font-size: 32upx;
			}
			.label{
				width: 180upx;
				flex-shrink: 0;
			}
			input{
				font-size: 32upx;
				height: 80upx;
				flex-flow: 1;
				width: 100%;
			}
			button{
				font-size: 28upx;
				color: #f79f21;
				margin: 0;
				padding: 0;
				flex-shrink: 0;
				border: none;
				outline: none;
				background-color: rgba(0,0,0,0);
			}
			button:after{
				border: none;
				outline: none;
			}
			.dis{
				color: #999999;
			}
		}
		.row:last-child{
			border-bottom: none;
		}
	}
	.save{
		margin-top: 38upx;
		margin-bottom: 96upx;
		background: linear-gradient(to right,#ff7f2a,#ff5a2a);
		margin-left: 100upx;
		margin-right: 100upx;
		border-radius: 41upx;
		height: 82upx;
		border: none;
		line-height: 82upx;
		outline: none;
		color: #FFFFFF;
		font-size: 32upx;
		font-weight: bold;
	}
	.ts1{
		width: 100%;
		font-size: 32upx;
		color: #202932;
		text-align: center;
	}
	.ts2{
		width: 100%;
		font-size: 28upx;
		color: #202932;
		text-align: center;
	}
	.copy{
		border: 1px solid #ffa023;
		height: 60upx;
		padding: 0 40upx;
		border-radius: 30upx;
		line-height: 56upx;
		font-size: 32upx;
		color: #ffa023;
		margin-top: 40upx;
		margin-bottom: 40upx;
	}
	.js{
		width: 100%;
	}
</style>
